<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>登录</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="login-page">
    <section id="logo-box">
        <div class="logoImg">
            <img src="images/logo.png">
        </div>

        <div class="logoText">
            <h3>压缩空气管理系统</h3>
            <p>COMPRESSED AIR MANAGEMENT SYSTEM</p>
        </div>
    </section>


    <section id="login-way">
        <ul id="loginWay-title">
            <li><router-link to="/account">账号登录</router-link></li>
            <li><router-link to="/sms">短信登录</router-link></li>
        </ul>
        <router-view></router-view>
    </section>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/lib/vue.min.js"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
//    路由
    const account = {
        template: '<div class="loginWay-box account-box">' +
        '<div class="input-item"><input type="text" placeholder="输入账号" name="phone"></div>'+
        '<div class="input-item">' +
        '<input type="text" placeholder="输入密码" name="psd">' +
        '</div>'+
        '<div class="autoLogin-item">' +
        '<span class="checkboxStyle"><input type="checkbox" id="autoLogin1"></span>' +
        '<label for="autoLogin1">下次自动登录</label>'+
        '</div>'+
        '<div class="loginBtn">登&nbsp;录</div>'+
        '<div class="shareTip">' +
        '<p><span>张山峰</span>给您分享了<span>2</span>台设备，请<a>登录查看</a></p>' +
        '<p>如果不知道密码，可直接短信登录</p>' +
        '</div>'+
        '</div>'
    };
    const sms = {
        template: '<div class="loginWay-box sms-box">' +

                    '<div class="input-item"><input type="text" placeholder="输入手机号码" name="phone"></div>'+
                    '<div class="input-item">' +
                        '<input type="text" placeholder="动态密码" name="oneTime-psd">' +
                        '<button type="button">获取动态密码</button>' +
                    '</div>'+
                    '<div class="autoLogin-item">' +
                        '<span class="checkboxStyle on_check"><input type="checkbox" id="autoLogin2"></span>' +
                        '<label for="autoLogin2">下次自动登录</label>'+
                    '</div>'+
                    '<div class="loginBtn">登&nbsp;录</div>'+
                    '<div class="shareTip">' +
                        '<p><span>张山峰</span>给您分享了<span>2</span>台设备，请<a>登录查看</a></p>' +
                        '<p>如果不知道密码，可直接短信登录</p>' +
                    '</div>'+

        '</div>'
    };

    const routes = [
        {path:'/account', component:account},
        {path:'/sms', component:sms},
        {path:'/', component:account}
    ];

    const router = new VueRouter({routes:routes});

    new Vue({
        router: router,
        el: '#login-way'


    }).$mount('#login-way')

</script>

<script>
    $(function(){
        $('.checkboxStyle').bind('click',function(){
            $(this).hasClass('on_check')? $(this).removeClass('on_check'): $(this).addClass('on_check');
        });



//        var $loginWay = $('#login-way');
        var $loginWayLi = $('#loginWay-title li');

        $loginWayLi.click(function(){
            $(this).addClass('active').siblings().removeClass('active');
        })
    })
</script>

</body>
</html>